@for $i from 0 through 150 {
  .width-#{$i},  .size-#{$i} { width:  $per-size * $i !important; }
  .height-#{$i}, .size-#{$i} { height: $per-size * $i !important; }
  .min-width-#{$i} { min-width: $per-size * $i !important; }
  .max-width-#{$i} { max-width: $per-size * $i !important; }
  .min-height-#{$i} { min-height: $per-size * $i !important; }
  .max-height-#{$i} { max-height: $per-size * $i !important; }
}
@for $i from 0 through 100 {
  .vw-#{$i} { width:  1vw * $i !important; }
  .vv-#{$i} { height: 1vh * $i !important; }
}
$per-width: 14px;
@for $i from 0 through 80 {
  .space-#{$i},  .size-#{$i} { width:  $per-width * $i !important; }
}

$i: 100;
@while $i >= 0 {
  .w-#{$i} { width: $i * 1% !important; }
  .h-#{$i} { height: $i * 1% !important; }
  $i: $i - 1;
}

.full-width  { width: 100vw !important; }
.full-height { height: calc( 100vh - 100px ) !important; }

.minw-100 { min-width: 100% !important; }
.minh-100 { min-height: 100% !important; }
.maxw-100 { max-width: 100% !important; }
.maxh-100 { max-height: 100% !important; }
.width-max { width: max-content!important; }
.siderHeight{
  height: calc( 100vh - 70px );
}
.contentHeight{
  height: calc( 100vh - 175px );
}
.height-auto{
  height: auto!important;
}